<template>
  <FModal header="设置初始值" width="600" :body-height="200" ref="FModal" @ok="setDefaultValue2FieldAction">
    <el-form ref="fieldActionForm" label-width="120px" :model="fieldAction">
      <el-form-item prop="fieldShowName" label="数据域" :rules="[]">
        <el-input disabled v-model="fieldAction.fieldShowName" style="width: 350px"/>
      </el-form-item>

      <el-form-item label="数据值">
        <div class="default-value-create-form-wrapper">
          <div class="default-value-create-form-row">
            <div class="default-value-create-form-left">
              <el-radio-group @change="defaultValueAutoChange"
                              v-model="fieldAction.defaultValueAuto">
                <el-radio model-value="0" label="0">
                  手工
                </el-radio>
              </el-radio-group>
            </div>
            <div class="default-value-create-form-right">
              <div style="width: 230px">
                <Component ref="defaultValueComponent" :field="fieldDefinition"
                           :auth="fieldAction.defaultValueAuto === '0' ? 'edit' : 'hide'"
                           :is="fieldAction.fieldComponent"/>
              </div>

            </div>
          </div>

          <div class="default-value-create-form-row">
            <div class="default-value-create-form-left">
              <el-radio-group @change="defaultValueAutoChange"
                              v-model="fieldAction.defaultValueAuto">
                <el-radio model-value="1" label="1">
                  系统变量
                </el-radio>
              </el-radio-group>
            </div>
            <div class="default-value-create-form-right">
              <el-select placeholder="请选择系统变量" style="width: 230px"
                         v-model="defaultFieldActionSelection.value"
                         @change="defaultFieldActionSelectionChange"
                         :disabled="fieldAction.defaultValueAuto === '0'">
                <el-option v-for="item in defaultValueOptions"
                           :name="item.value" :key="item.value"
                           :value="item.value" :label="item.title"/>
              </el-select>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </FModal>
</template>

<script>
import FModal from '@/components/FModal';
import {DefaultFieldAction} from '@/components/form/DefaultFormDefinition';
import InputComponents from '@/components/form/InputComponents';
import {InputComponentDefaultValues} from '@/components/form/SystemVariables';
import {isEmpty, isNotEmpty} from '@/utils/CommonUtils';

export default {
  name: "DefaultValueCreateModal",
  components: {
    FModal,
    ...InputComponents
  },
  data() {
    return {
      originFieldAction: DefaultFieldAction,
      fieldAction: DefaultFieldAction,
      fieldDefinition: undefined,
      defaultValueOptions: [],
      defaultFieldActionSelection: {
        value: undefined,
        text: undefined
      }
    };
  },
  methods: {
    setData(fieldAction, fieldDefinition) {
      this.fieldDefinition = fieldDefinition;
      this.originFieldAction = fieldAction;
      this.fieldAction = JSON.parse(JSON.stringify(fieldAction));
      this.getDefaultValueOptions();
      this.$refs.FModal.open().then(() => {
        this.$nextTick(() => {
          this.setDefaultValue();
        });
      });
    },
    setDefaultValue() {
      if (this.fieldAction.defaultValueAuto === '0') {
        this.$refs.defaultValueComponent.setFieldValue(this.fieldAction.defaultValue);
        this.defaultFieldActionSelection = {
          value: undefined,
          text: undefined
        };
      } else {
        this.$refs.defaultValueComponent.resetField();
        this.defaultFieldActionSelection = {
          value: this.fieldAction.defaultValue,
          text: this.fieldAction.defaultValueText
        };
      }
    },
    defaultValueAutoChange() {
      this.defaultFieldActionSelection = {
        value: undefined,
        text: undefined
      };
      this.fieldAction.defaultValue = undefined;
      this.$refs.defaultValueComponent.resetField();
    },
    defaultFieldActionSelectionChange() {
      let temp = this.defaultValueOptions.find(opt => opt.value === this.defaultFieldActionSelection.value);
      if (isNotEmpty(temp)) {
        this.defaultFieldActionSelection.text = temp.title;
      }
    },
    getDefaultValueOptions() {
      let component = this.fieldAction.fieldComponent;
      let list = InputComponentDefaultValues[component];
      if (isEmpty(list)) list = [];
      this.defaultValueOptions = list;
    },
    setDefaultValue2FieldAction() {
      this.originFieldAction.defaultValueAuto = this.fieldAction.defaultValueAuto;

      if (this.fieldAction.defaultValueAuto === '0') {
        this.originFieldAction.defaultValue = this.$refs.defaultValueComponent.getFieldValue({});
        this.originFieldAction.defaultValueText = undefined;
        if (this.$refs.defaultValueComponent.getFieldValueText) {
          this.originFieldAction.defaultValueText = this.$refs.defaultValueComponent.getFieldValueText();
        } else {
          this.originFieldAction.defaultValueText = this.originFieldAction.defaultValue;
        }
      } else {
        this.originFieldAction.defaultValue = this.defaultFieldActionSelection.value;
        this.originFieldAction.defaultValueText = this.defaultFieldActionSelection.text;
      }
      this.$refs.FModal.close();
    },
  }
};
</script>

<style scoped>
.default-value-create-form-wrapper {
  padding-left: 10px;
}

.default-value-create-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.default-value-create-form-left {
  margin-right: 10px;
  width: 100px;
}
</style>
